<template>
  <div class="checking-pane">
    <el-card style="height: 30vh; background-color: lightgreen" shadow="hover">
      <template #header><label>排队项目</label></template>
      <div v-if="checkingList.length > 0">
        <el-scrollbar max-height="20vh">
          <div>
            <el-row style="width: 100%; padding: 1vh">
              <el-col :offset="2" style="width: 60vh" :span="6"
                >项目名称</el-col
              >
              <el-col style="width: 60vh" :span="6">排队科室</el-col>
              <el-col style="width: 60vh" :span="10">操作</el-col>
            </el-row>
          </div>
          <el-row v-for="project in checkingList" :key="project.id">
            <CheckCard :project="project">
              <template #operate>
                <el-popconfirm
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#626AEF"
                  title="确认取消排队吗？"
                  @confirm="cancelQueue(<number>project.id)"
                >
                  <template #reference>
                    <el-button>取消排队</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </CheckCard>
          </el-row>
        </el-scrollbar>
      </div>
      <el-empty image-size="50" v-else description="暂无排队项目" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ICheckProject } from "@/api/queue/types";
import { PropType } from "vue";
import CheckCard from "@/views/client/patient/components/check-card.vue";
import { cancelUserQueue } from "@/api/queue";
import { InfoFilled } from "@element-plus/icons-vue";

const emit = defineEmits(["updateSource"]);

const props = defineProps({
  checkingList: {
    type: Array as PropType<ICheckProject[]>,
    required: true,
  },
});
const cancelQueue = (projectId: number) => {
  cancelUserQueue(projectId)
    .then((res) => {
      ElMessage({
        message: res.data,
        type: "success",
      });
    })
    .finally(() => {
      emit("updateSource");
    });
};
</script>

<style scoped lang="scss">
.checking-pane {
}
</style>
